<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    type PropType={
        myStyle:string,
        msg:string
    }
    defineProps<PropType>()//宏函数
//  const emit=defineEmits(["xxx"])//返回的是触发该自定义事件的函数
    type EmitType={
        (e:"xxx",data:string):void,
        (e:"niHao",d:number):void
    }

    const emit=defineEmits<EmitType>()
//  emit("xxx")
function f1(){
    emit("xxx","hello")
}
function f2(){
    emit("niHao",1)
}
</script>

<template>
    <div class="my_border3">
        <input type="text" :class="myStyle"/>
        <h1>{{  msg }}</h1>
        <button @click="f1">子组件触发自定义事件xxx </button>
        <button @click="f2">子组件触发自定义事件niHao </button>
    </div>
</template>

<style scoped>
button{
    margin-bottom: 10px;
}
.my_border1{
    border:1px solid red
}
.my_border2{
    background-color: burlywood;
}
.my_border3{
    border: 2px,solid,blueviolet;
}
.my_border4{
    border: 2px,solid,gold;
}
</style>
